<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>案例：省市联级</title>

        <!--引入外部js文件-->
        <script type="text/javascript" src="cities.js"></script>

    </head>
    <body>
        <select id="province" name="province">
            <option value=''>--请选择省--</option>
        </select>
        <select id="city" name="city">
            <option value=''>--请选择市--</option>
        </select>
    </body>
</html>

<script type="text/javascript">
    /*解决第一个问题： 把json数据中的省份，放到名字为：province的select标签中*/

    //1、获取省份下拉列表标签对象
    var elProvince = document.getElementById("province");

    //2、取出json数据中的所有省份名称(文本)及省份id(value)
    for (let i = 0; i < china.length; i++) {
        var optionContent = china[i].p_name;
        var optionValue = china[i].p_id;

        //创建Option对象
        var option = new Option(optionContent, optionValue);

        //3、把Option对象，添加到select标签下
        elProvince.appendChild(option);
    }


    //解决第二个问题： 根据选择的省份，获取省份下的城市，并添加到select标签下

    //当省份下列列表发生改变时触发事件
    elProvince.onchange = function () {

        //获取城市下拉列表标签对象
        var elCity = document.getElementById("city");

        elCity.options.length=1;//把现有下拉列表中的option对象保留一个

        
        //this ： 省份下拉列表
        //console.log(this)
        //console.log(this.value)

        //获取选择的省份的value值
        let pid = this.value;

        //遍历数组
        for (let i = 0; i < china.length; i++) {
            //判断：选择省份的value值 和 json中的p_id相等
            if(pid == china[i].p_id){

                //获取所有的cities的数据值
                for (let j = 0; j < china[i].cities.length; j++) {

                    //获取cities数组中的c_name、c_id
                    var cName = china[i].cities[j].c_name;
                    var cId = china[i].cities[j].c_id;

                    //创建Option对象
                    var option = new Option(cName,cId);

                    //把Option对象，添加到城市下拉列表标签下
                    elCity.appendChild(option);
                }

                //结束循环
                break;
            }
        }


    }
</script>
